<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-col :span="22">

            <search @search="search" @clearForm="clearForm" />

          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light">
              <el-button type="success" icon="el-icon-edit" @click="openDialog({})">新增技巧</el-button>
            </div>
          </el-col>
        </el-row>
        <el-alert type="info" show-icon :closable="false">
          共{{total}}条记录
        </el-alert>
        <!-- 表格 -->
        <Table :page="page" :pages="pages" :pageSize="pageSize" ref="table" @getpages="getpages" @openDialog="openDialog" @handleClick="handleClick" @handlePreview="handlePreview" @pageChange="pageChange" />

        <!-- 分页符 -->
        <div class="pagination">
          <el-pagination v-show="pages>1" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" layout="total, sizes, prev, pager, next, jumper" :page-sizes="pageSizes" :page-size="pageSize" :page-count="pages">
          </el-pagination>
        </div>
      </el-card>
      <!-- 新增 修改对话框 -->
      <Dialog ref="Dialog" :dialogVisible.sync="dialogVisible" @update="update" />
      <!-- 预览对话框 -->
      <Preview ref="Preview" :PreviewDialog.sync="PreviewDialog" />

      <el-dialog class="videoDialog" ref="videoDialog" :visible="videoDialog" width="50%" @close="videoDialog = false">
        <span @click="videoDialog = false" class="el-icon-close closeVideo"></span>
        <video ref="videoRef" autoplay controls class="video" :src="url"></video>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Search from './../components/articles-search.vue'
import Table from './../components/articles-table.vue'
import Dialog from './../components/articles-add.vue'
import Preview from './../components/articles-preview.vue'
export default {
  name: 'Articles',
  components: { Search, Table, Dialog, Preview },
  data() {
    return {
      total: 10,
      page: 1,
      pages: 1,
      pageSize: 10,
      pageSizes: [5, 8, 10, 15],
      dialogVisible: false, // 新增/修改弹窗
      PreviewDialog: false, // 预览弹窗
      videoDialog: false, // 视频弹窗
      videoURL: '' // 视频地址
    }
  },
  computed: {
    // 视频弹窗显示
    url() {
      return this.videoDialog ? this.videoURL : '#'
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.page = 1
      this.$refs.table.getlist({ page: this.page, pagesize: this.pageSize })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.$refs.table.getlist({ page: this.page, pagesize: this.pageSize })
    },
    getpages(total, pages) {
      this.total = total
      this.pages = pages
    },
    // 新增 修改 弹窗
    openDialog(val) {
      this.dialogVisible = true
      // console.log(val)
      if (val.id) {
        this.$refs.Dialog.form.title = val.title
        this.$refs.Dialog.form.articleBody = val.articleBody
        this.$refs.Dialog.form.videoURL = val.videoURL
        this.$refs.Dialog.form.id = val.id
      }
    },
    pageChange() {
      if (this.pages >= 1) {
        this.page--
        this.$refs.table.getlist({ page: this.page, pagesize: this.pageSize })
      }
    },
    update() {
      this.$refs.table.getlist({ page: this.page, pagesize: this.pageSize })
      // this.dialogVisible = false
    },
    handleClick(row) {
      // 预览弹窗
      this.PreviewDialog = true
      this.$refs.Preview.row = row
    },
    handlePreview(row) {
      // 视频弹窗
      this.videoDialog = true
      this.videoURL = row
      console.log(this.videoURL)
    },
    // 搜索
    search(val) {
      this.page = 1
      this.$refs.table.getlist({ ...val, page: this.page, pagesize: this.pageSize })
    },
    // 清除
    clearForm() {
      this.page = 1
      this.$refs.table.getlist({ page: this.page, pagesize: this.pageSize })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-alert {
  height: 30px;
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: right;
  margin-top: 15px;
}
::v-deep .videoDialog {
  background: rgba(0, 0, 0, 0.05);
  .el-dialog {
    //  display: none;
    background: transparent;
    box-shadow: 0 0;
    .el-dialog__header {
      // background: transparent;
      display: none;
    }
    .el-dialog__body {
      border: transparent;
    }
    .closeVideo {
      position: absolute;
      right: 45%;
      transform: translateX(-50%);
      top: -50px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgb(0, 0, 0, 0.3);
      text-align: center;
      line-height: 40px;
    }
    .video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
